<template>
  <div>
    <div class="box">
      <div style="display:flex;flex-direction: row;width: 49%;">
        <div class="pic">
          <div class="pic_coler" style="background: #FF8A8A;">
            <img
              alt="daili"
              class="body-pic"
              src="@/assets/img/sms/daili.png"
            />
          </div>
        </div>
        <div class="box-text">
          <div class="body_header">
            <span>代理总数</span>
          </div>
          <div class="body_box">
            <span>{{ platformData.pmsTotal || 0 }}</span>
          </div>
        </div>
      </div>
      <el-divider direction="vertical"></el-divider>
      <div style="display:flex;flex-direction: row;width: 49%;">
        <div class="pic">
          <div class="pic_coler" style="background: #82D2FF;">
            <img alt="qiye" class="body-pic" src="@/assets/img/sms/qiye.png" />
          </div>
        </div>
        <div class="box-text">
          <div class="body_header">
            <span>企业总数</span>
          </div>
          <div class="body_box">
            <span>{{ platformData.emsTotal || 0 }}</span>
          </div>
        </div>
      </div>
    </div>
    <!--    数据统计-->
    <el-col :span="24">
      <index-data-line
        :use-data-day-range-info="useDataDayRangeInfo"
        style="margin-bottom: 10px"
      ></index-data-line>
    </el-col>
  </div>
</template>

<script>
import API from "@/network/api/smsindexApi";
import IndexDataLine from "./components/indexDataLine";
import { createSign } from "@/utils/sign";

export default {
  name: "index",
  components: {
    IndexDataLine
  },
  data() {
    return {
      emsDataList: [],
      pmsDataList: [],
      IndexData: {
        currentOrganId: 0,
        timestamp: ""
      },
      useDataDayRangeInfo: {
        useDataDayRangePms: [],
        useDataDayRangeEms: []
      },
      platformData: {
        pmsTotal: 0,
        emsTotal: 0
      }
    };
  },
  created() {
    this.currentUserInfo = JSON.parse(localStorage.getItem("updateUserInfo"));
    this.requestIndexData();
  },
  methods: {
    requestIndexData() {
      const that = this;
      that.IndexData.currentOrganId = that.currentUserInfo.organId;
      that.IndexData.timestamp = new Date().getTime();
      if (that.IndexData.sign) {
        delete that.IndexData.sign;
      }
      that.IndexData.sign = createSign(JSON.stringify(that.IndexData));
      API.queryIndexData(that.IndexData).then(res => {
        if (res.data.data.length !== 0) {
          const omsData = res.data.data;
          that.useDataDayRangeInfo.useDataDayRangePms = omsData;
          that.useDataDayRangeInfo.useDataDayRangeEms = omsData;
          // 获取最新一天的数据展示
          that.platformData.pmsTotal = omsData[omsData.length - 1].pmsTotal;
          that.platformData.emsTotal = omsData[omsData.length - 1].emsTotal;
        }
      });
    }
  }
};
</script>

<style scoped>
.el-divider--vertical {
  display: inline-block;
  width: 1px;
  height: 100px;
  margin: 0 8px;
  vertical-align: middle;
  position: relative;
}
.box {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: row;
  background-color: #ffffff;
  width: 100%;
  margin-bottom: 10px;
  padding: 37px 0 43px 0;
  border-radius: 5px;
}

.box-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.body_header {
  color: #999999;
  font-size: 18px;
  text-align: center;
}

.body_box {
  font-size: 22px;
  text-align: center;
  color: #333333;
  font-weight: bold;
  margin-top: 12px;
  margin-bottom: 2px;
  border-bottom: 1px #fd9800 solid;
}

.body_yu {
  color: rgba(193, 193, 193, 100);
  font-size: 14px;
  text-align: center;
}

.body-pic {
  width: 40px;
  height: 40px;
}

.pic {
  width: 50%;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  justify-content: center;
}
.pic_coler {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 90px;
  width: 90px;
  height: 90px;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
  justify-content: center;
}

.clearfix:after {
  clear: both;
}

.box-card {
  width: 45%;
}

.box-card-header {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.no1 {
  width: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.no11 {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ff9959;
  background-color: #ffee00;
  width: 50%;
  border-radius: 60px;
  padding: 3px;
}

.no2 {
  width: 60%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.no3 {
  width: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
